{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import pandas as pd\n",
    "import matplotlib.pyplot as plt\n",
    "%matplotlib inline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "url = \"https://raw.githubusercontent.com/dwdii/IS608-VizAnalytics/master/FinalProject/Data/CO-EST2014-alldata.csv\"\n",
    "pop2014 =pd.read_csv(url,encoding='latin-1',dtype={'STATE': 'str', 'COUNTY': 'str'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "pop2014_by_state = pop2014[pop2014.SUMLEV == 40]\n",
    "states = pop2014_by_state[['STNAME','POPESTIMATE2011', 'POPESTIMATE2012', 'POPESTIMATE2013','POPESTIMATE2014']] \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "require.config({\n",
       "    paths: {\n",
       "        d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min',\n",
       "        queue: '//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min',\n",
       "        topojson: '//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min'\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "require.config({\n",
    "    paths: {\n",
    "        d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min',\n",
    "        queue: '//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min',\n",
    "        topojson: '//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min'\n",
    "    }\n",
    "});\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "\n",
       ".counties {\n",
       "  fill: none;\n",
       "}\n",
       "\n",
       ".states {\n",
       "  fill: none;\n",
       "  stroke: #fff;\n",
       "  stroke-linejoin: round;\n",
       "}\n",
       "\n",
       ".q0-9 { fill:rgb(247,251,255); }\n",
       ".q1-9 { fill:rgb(222,235,247); }\n",
       ".q2-9 { fill:rgb(198,219,239); }\n",
       ".q3-9 { fill:rgb(158,202,225); }\n",
       ".q4-9 { fill:rgb(107,174,214); }\n",
       ".q5-9 { fill:rgb(66,146,198); }\n",
       ".q6-9 { fill:rgb(33,113,181); }\n",
       ".q7-9 { fill:rgb(8,81,156); }\n",
       ".q8-9 { fill:rgb(8,48,107); }\n",
       "\n",
       "</style>\n",
       "<div id=\"choropleth\" />\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from IPython.core.display import display, Javascript, HTML\n",
    "\n",
    "display(HTML(\"\"\"\n",
    "<style>\n",
    "\n",
    ".counties {\n",
    "  fill: none;\n",
    "}\n",
    "\n",
    ".states {\n",
    "  fill: none;\n",
    "  stroke: #fff;\n",
    "  stroke-linejoin: round;\n",
    "}\n",
    "\n",
    ".q0-9 { fill:rgb(247,251,255); }\n",
    ".q1-9 { fill:rgb(222,235,247); }\n",
    ".q2-9 { fill:rgb(198,219,239); }\n",
    ".q3-9 { fill:rgb(158,202,225); }\n",
    ".q4-9 { fill:rgb(107,174,214); }\n",
    ".q5-9 { fill:rgb(66,146,198); }\n",
    ".q6-9 { fill:rgb(33,113,181); }\n",
    ".q7-9 { fill:rgb(8,81,156); }\n",
    ".q8-9 { fill:rgb(8,48,107); }\n",
    "\n",
    "</style>\n",
    "<div id=\"choropleth\" />\n",
    "\"\"\"))\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import jinja2\n",
    "\n",
    "choropleth = jinja2.Template(\"\"\"\n",
    "\n",
    "require([\"d3\",\"queue\",\"topojson\"], function(d3,queue,topojson){  \n",
    "\n",
    "d3.select(\"#choropleth svg\").remove()\n",
    "\n",
    "\n",
    "var width = 960,\n",
    "    height = 600;\n",
    "\n",
    "var rateById = d3.map();\n",
    "\n",
    "var quantize = d3.scale.quantize()\n",
    "    .domain([0, .15])\n",
    "    .range(d3.range(9).map(function(i) { return \"q\" + i + \"-9\"; }));\n",
    "\n",
    "var projection = d3.geo.albersUsa()\n",
    "    .scale(1280)\n",
    "    .translate([width / 2, height / 2]);\n",
    "\n",
    "var path = d3.geo.path()\n",
    "    .projection(projection);\n",
    "\n",
    "//row to modify\n",
    "var svg = d3.select(\"#choropleth\").append(\"svg\")\n",
    "    .attr(\"width\", width)\n",
    "    .attr(\"height\", height);\n",
    "\n",
    "queue()\n",
    "    .defer(d3.json, \"us.json\")\n",
    "    .defer(d3.tsv, \"unemployment.tsv\", function(d) { rateById.set(d.id, +d.rate); })\n",
    "    .await(ready);\n",
    "\n",
    "function ready(error, us) {\n",
    "  if (error) throw error;\n",
    "\n",
    "  svg.append(\"g\")\n",
    "      .attr(\"class\", \"counties\")\n",
    "    .selectAll(\"path\")\n",
    "      .data(topojson.feature(us, us.objects.counties).features)\n",
    "    .enter().append(\"path\")\n",
    "      .attr(\"class\", function(d) { return quantize(rateById.get(d.id)); })\n",
    "      .attr(\"d\", path);\n",
    "\n",
    "  svg.append(\"path\")\n",
    "      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))\n",
    "      .attr(\"class\", \"states\")\n",
    "      .attr(\"d\", path);\n",
    "}\n",
    "});\n",
    "\"\"\");\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "\n",
       "require([\"d3\",\"queue\",\"topojson\"], function(d3,queue,topojson){  \n",
       "\n",
       "d3.select(\"#choropleth svg\").remove()\n",
       "\n",
       "\n",
       "var width = 960,\n",
       "    height = 600;\n",
       "\n",
       "var rateById = d3.map();\n",
       "\n",
       "var quantize = d3.scale.quantize()\n",
       "    .domain([0, .15])\n",
       "    .range(d3.range(9).map(function(i) { return \"q\" + i + \"-9\"; }));\n",
       "\n",
       "var projection = d3.geo.albersUsa()\n",
       "    .scale(1280)\n",
       "    .translate([width / 2, height / 2]);\n",
       "\n",
       "var path = d3.geo.path()\n",
       "    .projection(projection);\n",
       "\n",
       "//row to modify\n",
       "var svg = d3.select(\"#choropleth\").append(\"svg\")\n",
       "    .attr(\"width\", width)\n",
       "    .attr(\"height\", height);\n",
       "\n",
       "queue()\n",
       "    .defer(d3.json, \"us.json\")\n",
       "    .defer(d3.tsv, \"unemployment.tsv\", function(d) { rateById.set(d.id, +d.rate); })\n",
       "    .await(ready);\n",
       "\n",
       "function ready(error, us) {\n",
       "  if (error) throw error;\n",
       "\n",
       "  svg.append(\"g\")\n",
       "      .attr(\"class\", \"counties\")\n",
       "    .selectAll(\"path\")\n",
       "      .data(topojson.feature(us, us.objects.counties).features)\n",
       "    .enter().append(\"path\")\n",
       "      .attr(\"class\", function(d) { return quantize(rateById.get(d.id)); })\n",
       "      .attr(\"d\", path);\n",
       "\n",
       "  svg.append(\"path\")\n",
       "      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))\n",
       "      .attr(\"class\", \"states\")\n",
       "      .attr(\"d\", path);\n",
       "}\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display(Javascript(choropleth.render()))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
